WebアイコンフォントFont AwesomeのSCSS版を使ってみる
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。
Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。
- 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応
- 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応
注意
今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたいと思います。SCSS版はコンパイルする環境が必要です。まだ使ったことのない方はこちら「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」を参考に環境を準備してください。
Webアイコンフォントとは
Webでピクトグラムのような小さなアイコンを使うことは良くあると思います。サイトによっては何十種類というアイコンを使ってたりします。よくCSS Spriteで1つにまとめたりしますよね。
振る舞いに合わせてボタンやリンクなどの状態を変えたい時、それに合わせたアイコンもさらに必要になってきます。
例えば、20個のアイコンに対してnormal, hover, active, visited, disableの5つの状態が必要になったとき作らなければならないアイコンの数は100個です。
Retinaディスプレイ用の高解像度版（1.5倍と2倍）も含めると300個といったところでしょうか。こうなるとファイルサイズも大きくなりがちです。こんな働き方してたら負けかなと思ってます。
そんな時にすべて解決してくれるのがフォントの1文字1文字をベクターアイコンに置き換えたWebフォントアイコンってやつです。言ってしまえばテキストと同じなのでCSSのcolor、font-weightやtext-shadowやmask-imageプロパティが使えます。ベクターなのでRetinaディスプレイで拡大しても美しいし、アイコンの数によっては画像よりファイルサイズを抑えられます。
IEの対応
Font AwesomeはIE7に対応しています。
IEのConditional Comment（条件付きコメント）を使いIE7専用のCSSを読み込むことで対応します。
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <!--[if IE 7]> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css"> <![endif]-->
SCSS版でIEにどう対応するかはまだ調査できていないので、別の機会に紹介したいと思います。
Font Awesomeとは
Font AwesomeはBootstrapでも使われている361個のアイコンが利用できるフリーのWebアイコンフォントです（バージョン3.2.1）。Bootstrapのために作られたものですがBootstrapなしでも簡単に利用することができます。
Font Awesomeのメリット
- 1フォントで361のアイコン
- CSSでコントロールできる（LESS、Sass対応）
- 自由な拡大・縮小
- 商業利用可
- IE7サポート
- Retinaディスプレイ対応
- Bootstrapのために作られた
- チートシートあり
- スクリーンリーダー対応
- サブセット対応（別プロジェクト：http://www.icnfnt.com/）
361個のアイコン
どんなアイコンがあるかはこちらFont Awesome The Iconで確認できます。アイコンは今のところ7つのカテゴリーに分けられているようです。
- Web Application Icons
- Currency Icons
- Text Editor Icons
- Directional Icons
- Video Player Icons
- Brand Icons
- Medical Icons
また、すべてのアイコンはチートシートで確認することができます。
ライセンス
Font Awesomeのダウンロード
Font Awesomeはとても簡単に導入することができます。もちろんBootstrapに依存しません。CSS版とLESS版は公式のGet Startedを参考にすればすぐに導入できます。今回は公式資料にないSCSS版を利用してみました。
まずは、以下のリンクからFont Awesomeをダウンロードしましょう。ダウンロードしたファイルの中はこんな風になっています。
font-awesome/
├── css
│ ├── font-awesome-ie7.css
│ ├── font-awesome-ie7.min.css
│ ├── font-awesome.css
│ └── font-awesome.min.css
├── font
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ └── fontawesome-webfont.woff
├── less
│ ├── bootstrap.less
│ ├── core.less
│ ├── extras.less
│ ├── font-awesome-ie7.less
│ ├── font-awesome.less
│ ├── icons.less
│ ├── mixins.less
│ ├── path.less
│ └── variables.less
└── scss
├── _bootstrap.scss
├── _core.scss
├── _extras.scss
├── _icons.scss
├── _mixins.scss
├── _path.scss
├── _variables.scss
├── font-awesome-ie7.scss
└── font-awesome.scss
Font Awesomeを使うために必要なファイルだけを読み込む
ダウンロードしたものをそのまま使うのは無駄なファイルが多いためSCSS版の利点である必要なファイルだけを整理して利用しましょう。SCSS版で必要になるのはfont/とscss/にあるファイルだけです。また、scss/の中でもこれらのファイルは以下の理由で不要です。
- scss/_bootstrap.scss Bootstrapは使わないため不要
- scss/font-awesome-ie7.scss IE7向けの読み込みは今回解説から省くため
- scss/font-awesome.scss @importが記述されたファイルで別ファイルに読み込むため
必要なファイルをチェックする
公式が用意しているfont-awesome.scssには以下のように@importを使ってファイルを読み込んでいます。とりあえず@import "bootstrap";を除いた6つを読み込むようにすれば良さそうです。
font-awesome.scss
/*! * Font Awesome 3.2.1 * the iconic font designed for Bootstrap * ...省略 */ @import "variables"; @import "mixins"; @import "path"; @import "core"; @import "bootstrap"; @import "extras"; @import "icons";
例としてこのようなファイル構成にしてみました。
example-font-awesome/ ├── css │ └── style.css ├── fonts │ └── font-awesome │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── scss │ ├── font-awesome │ │ ├── _core.scss │ │ ├── _extras.scss │ │ ├── _icons.scss │ │ ├── _mixins.scss │ │ ├── _path.scss │ │ └── _variables.scss │ └── style.scss ├── config.rb └── index.html
これ以降はSCSSのコンパイルがすでに可能な状態として進めます。config.rbの設定を忘れずに行ってください。
必要なファイルだけを@importする
公式が用意しているfont-awesome.scssを@importしても利用することはできますが、font-awesome.cssもコンパイルされてしまい無駄です。必要なパーシャルファイル（_から始まる読み込み専用ファイル）のみ読み込みたいですよね。
そこで上記ファイル構成を前提に別に用意したstyle.scssにFont Awesomeに必要なパーシャルファイルを読み込みます。
scss/style.scss
@import "font-awesome/variables"; @import "font-awesome/mixins"; @import "font-awesome/path"; @import "font-awesome/core"; @import "font-awesome/extras"; @import "font-awesome/icons";
最後にFont Awesomeのフォントファイル類を別のディレクトリに移しているのでパスの変更が必要です。scss/font-awesome/variables.scssを開いて、$FontAwesomePath: "../font" !default;の部分を変更します。
// Variables // -------------------------- $FontAwesomePath: "../fonts/font-awesome" !default; $FontAwesomeVersion: "3.2.1" !default; $borderColor: #eeeeee !default; $iconMuted: #eeeeee !default; $iconLight: white !default; $iconDark: #333333 !default; $icons-li-width: (30em/14); ...
scss/font-awesome/variables.scssを変更したくないという場合はscss/style.scssから上書きさせることもできます。こちらのやり方をオススメします。
//Override Font Awesome path $FontAwesomePath: "../fonts/font-awesome"; //import font-awesome @import "font-awesome/variables"; @import "font-awesome/mixins"; @import "font-awesome/path"; @import "font-awesome/core"; @import "font-awesome/extras"; @import "font-awesome/icons";
コンパイルして正しく表示されるか試してみる
それでは、SCSSをコンパイルして表示されるかチェックしてみましょう。index.htmlファイルを作り、コンパイルされたstyle.cssを読み込みます。
index.html
公式のやり方の通り、iタグにclass指定でアイコンを指定します。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Example: Font Awesome</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p><i class="icon-comment"></i> Hello World</p> </body> </html>
プレビュー
無事表示されました。
拡大してみると・・・
さすがベクター、拡大しても美しいままです。
公式に用意されているExampleの動作確認
公式で用意されているExampleがSCSS版でどの程度動くのかサンプルファイルを用意して試してみました。実際の表示はこちらのサンプルを確認してください。結果は以下の通りです。
- Inline Icons：○
- Larger Icons：○
- Bordered & Pulled Icons：○
- Buttons：×
- Button Groups：×
- Button Dropdowns：×
- Bulleted Lists：○
- Navigation：×
- Prepended & Appended Form Inputs：×
- Animated Spinner：○
- Rotated & Flipped：○
- Stacked Icons：○
どうやらいくつかの機能はBootstrapを前提としているため、Exampleの通りにはいかないものもあるようです。
Inline Icons: ○
<p><i class="icon-comment"></i> Hello World</p> <p><a href="#" class="icon-comment"> Hello World</a></p>
Inline IconはCSS :beforeとcontentプロパティが使われています。
Larger Icons: ○
<p> <i class="icon-comment"></i> <i class="icon-comment icon-large"></i> <i class="icon-comment icon-2x"></i> <i class="icon-comment icon-3x"></i> <i class="icon-comment icon-4x"></i> </p>
Bordered & Pulled Icons: ○
Bordered & Pulled Icons Example
<p class="clear"><i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together ... lots of new possibilities.</p> <p class="clear"><i class="icon-flag icon-4x pull-left icon-border"></i> Use a few of the new styles together ... lots of new possibilities.</p>
Buttons: ×
<p class="clear"> <a class="btn" href="#"> <i class="icon-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> <i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-large btn-primary" href="#"> <i class="icon-comment"></i> Comment</a> <a class="btn btn-small btn-info" href="#"> <i class="icon-info-sign"></i> Info</a> <a class="btn btn-danger" href="#"> <i class="icon-trash icon-large"></i> Delete</a> <a class="btn btn-small" href="#"> <i class="icon-cog"></i> Settings</a> <a class="btn btn-large btn-danger" href="#"> <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1</a> <a class="btn btn-primary" href="#"> <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> </p>
Button Groups: ×
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div>
Button Dropdowns: ×
<div class="btn-group open"> <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-caret-down"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
Bulleted Lists: ○
<ul class="icons-ul"> <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> <li><i class="icon-li icon-ok"></i>Buttons</li> <li><i class="icon-li icon-ok"></i>Button groups</li> <li><i class="icon-li icon-ok"></i>Navigation</li> <li><i class="icon-li icon-ok"></i>Prepended form inputs</li> <li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li> </ul>
Navigation: ×
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li> <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li> </ul>
Prepended & Appended Form Inputs: ×
Prepended & Appended Form Inputs Example
<form> <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span> <input class="span2" type="text" placeholder="Email address"> </div> <div class="input-prepend"> <span class="add-on"><i class="icon-key"></i></span> <input class="span2" type="password" placeholder="Password"> </div> </form>
Animated Spinner: ○
<p><i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...</p>
Rotated & Flipped: ○
<p> <i class="icon-shield"></i> normal<br> <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical </p>
Stacked Icons: ○
<p> <span class="icon-stack"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-twitter"></i> </span> icon-twitter on icon-check-empty<br> <span class="icon-stack"> <i class="icon-circle icon-stack-base"></i> <i class="icon-flag icon-light"></i> </span> icon-flag on icon-circle<br> <span class="icon-stack"> <i class="icon-sign-blank icon-stack-base"></i> <i class="icon-terminal icon-light"></i> </span> icon-terminal on icon-sign-blank<br> <span class="icon-stack"> <i class="icon-camera"></i> <i class="icon-ban-circle icon-stack-base text-error"></i> </span> icon-camera on icon-ban-circle </p>
最後に
Font Awesomeはアイコンの種類も多くどれもクオリティが高いので実用的なWebアイコンフォントだと思います。bootstrapで使われているということもあり今後のバージョンアップにも期待が持て安心して使えるのが良いですね。どうやらアップデートで新しいアイコンも追加されているようです。このブログにも導入しようと思います。
以上、Font Awesomeの紹介でした。
![[登壇資料]DevelopersIO 2024 TOKYOで「Notion × Wraptasサイト作成ハンズオン」を行いました #devio2024](https://images.ctfassets.net/ct0aopd36mqt/15fBmQfuSigujXU7gsvbcB/b38e8dcb0f6d4cc53a85bbf4554ecdbe/devio2024_tokyo_w1200h630.png)
